<template>
  <div class="information">
    <el-card shadow="always" >
      <!-- 卡片头部-->
      <template #header>
        <div class="card-header">
          <p>{{ user.isInsure === 1 ? '自费' : '医保' }}</p>
          <span>{{ user.name }}</span>
          <div>
            <el-button @click="handleEdit" type="primary" icon="Edit" circle/>
            <el-popconfirm
                :icon="InfoFilled"
                icon-color="#f56c6c"
                width="200px"
                :title="`确定删除用户${user.name}？`"
                @confirm="removeUser"
                @cancel="handleCancel"
            >
              <template #reference>
                <el-button type="danger" icon="Delete" circle
                           v-if="route.path === '/user/patients'"
                />
              </template>
            </el-popconfirm>

          </div>
        </div>
      </template>
      <!-- 卡片内容-->
      <div class="card-info">
        <p v-for="(item, index) in information" :key="index">
          <span>{{ item.label }}:</span>
          <span>{{ item.value }}</span>
        </p>
        <!-- 红色的已经选择的盒子 -->
        <transition name="confirm">
          <div class="confirm" v-if="props.index === currentIndex">已选择</div>
        </transition>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {InfoFilled} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {reqRemoveUser} from "@/api/user/index.js";

const emit = defineEmits(['changeScene', 'removeUser'])
const router = useRouter()
const route = useRoute()
//接收父组件传过来的数据信息
const props = defineProps(["user", "index", "currentIndex"])

const information = [
  {label: '姓名', value: props.user.name},
  {label: '家属', value: props.user.contactsName},
  {label: '性别', value: props.user.sex === 1 ? '男' : '女'},
  {label: '婚姻状态', value: props.user.isMarry === 0 ? "未婚" : "已婚"},
  {label: '联系方式', value: props.user.phone},
  {label: '出生日期', value: props.user.birthdate},
  {label: '身份证号', value: props.user.certificatesNo},
  {label: '创建日期', value: props.user.createTime},
  {label: '家庭住址', value: props.user.address}
];

// 点击编辑按钮触发的事件
const handleEdit = () => {
  //1:就诊人管理模块点击修改按钮 2:预约挂号点击修改按钮
  if (route.path === '/user/patients') {
    emit('changeScene', props.user)
  } else {
    router.push({path: '/user/patients', query: { type: "edit", id: props.user.id } })
  }
}

// 点击删除按钮触发的事件
const removeUser = async () => {
 try {
   await reqRemoveUser(props.user.id)
   ElMessage.success('删除成功')
   emit('removeUser')
 } catch (error) {
   ElMessage.error('删除失败')
 }
}

// 点击取消按钮触发的事件
const handleCancel = () => {
 ElMessage.info('已取消删除')
}
</script>

<style scoped lang="scss">
.information {
  display: flex;
  justify-content: center;
  cursor: pointer;

  .card-header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    background-color: #e1e1e1;

    p {
      background-color: #fff;
      border-radius: 10px;
      padding: 5px;
    }
  }

  .card-info {
    width:260px;
    position: relative;
    padding: 10px 0;

    p {
      font-size: 14px;
      color: #666;
      margin: 10px 10px 10px 20px;

      span:first-child {
        font-weight: bold;
        margin-right: 8px;
      }
    }

    .confirm {
      position: absolute;
      width: 200px;
      height: 200px;
      color: red;
      border-radius: 50%;
      border: 1px dashed red;
      text-align: center;
      line-height: 200px;
      left: 20%;
      top: 20%;
      opacity: 0.5;
      transform: rotate(35deg);
      font-weight: bold;
    }

    // 红色的已经选择的盒子的动画效果
    .confirm-enter-from {
      transform: scale(1);
    }

    .confirm-enter-active {
      transition: all 0.3s;
    }

    .confirm-enter-to {
      transform: scale(1.1);
    }
  }

}

.el-card {
  --el-card-padding: 0px;
}

</style>